<template>
  <div id="app">
    <el-container class="container">

      <el-header class="el-header" style="padding: 0">
        <Header></Header>
        <el-divider></el-divider>
      </el-header>


      <el-container class="main-container">
        <el-aside width="200px" v-show="!$route.meta.hiddenNav">
          <LeftNav></LeftNav>
        </el-aside>
        <el-main class="bg">
          <router-view></router-view>
        </el-main>
      </el-container>

<!--      <el-footer>-->
<!--        <Footer></Footer>-->
<!--      </el-footer>-->
    </el-container>

  </div>
</template>

<script>
import LeftNav from "@/components/LeftNav";
import Header from "@/components/Header";
export default {
  name: 'App',
  components: {
    Header,
    LeftNav
  }
}
</script>

<style>
body {
  margin: 0;
}
/*#app {*/
/*  font-family: Avenir, Helvetica, Arial, sans-serif;*/
/*  -webkit-font-smoothing: antialiased;*/
/*  -moz-osx-font-smoothing: grayscale;*/
/*  text-align: center;*/
/*  color: #2c3e50;*/
/*  margin-top: 0;*/
/*}*/
.el-header{
  line-height: 100px;
  margin-top: auto;
}
body > .el-container {
  margin-bottom: 40px;
  height: 100%;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  display: flex;
  height: 100%;
  width: 100%;
  position: absolute;
}
.container{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

</style>
